import React from 'react'
import { View, StyleSheet } from 'react-native'
import { ScaleT, ScaleS } from 'src/utils/ScreenUtil'
import PropTypes from 'prop-types'
import CustomButton from '../button/CustomButton'
import CustomImage from '../image/CustomImage'

export default function CheckButton (props) {
  const { checked, onPress, params, style } = props
  const onCheckedClick = (params) => {
    onPress && onPress(params)
  }
  return (
    <CustomButton style={style} onPress={onCheckedClick} params={{ ...params, checked }}>
      {checked ? (
        <View style={styles.selectedIconView}>
          <CustomImage style={styles.selectedIconImg} source={require('@/imgC/userinfo/icon_white_ok.png')}/>
        </View>
      ) : (
        <View style={styles.selectIconView}/>
      )}
    </CustomButton>
  )
}
CheckButton.defaultProps = {
  checked: false,
  params: {}
}
CheckButton.propTypes = {
  checked: PropTypes.bool.isRequired,
  onPress: PropTypes.func.isRequired,
  params: PropTypes.object,
  style: PropTypes.oneOfType([PropTypes.object, PropTypes.array])
}

const styles = StyleSheet.create({
  selectIconView: {
    width: ScaleS(20),
    height: ScaleS(20),
    borderColor: '#979797',
    borderRadius: ScaleS(10),
    borderWidth: ScaleS(1),
    borderStyle: 'solid'
  },
  selectedIconView: {
    width: ScaleS(20),
    height: ScaleS(20),
    backgroundColor: '#000000',
    borderRadius: ScaleS(10),
    justifyContent: 'center',
    alignItems: 'center'
  },
  selectedIconImg: {
    width: ScaleS(12),
    height: ScaleS(8)
  }
})
